<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
  <meta charset="UTF-8">
  <title>个人博客主页</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <style>
    body {
      font-family: 'Roboto', Arial, sans-serif;
      margin: 0;
      padding: 0;
      background-color: #f0f0f0;
      color: #333;
    }

    header {
      background: linear-gradient(to bottom, #0099ff, #007BFF);
      color: white;
      padding: 10px 0;
      text-align: center;
    }

    nav {
      margin: 10px 0;
      display: flex;
      justify-content: center;
    }

    nav a {
      color: white;
      text-decoration: none;
      margin: 0 15px;
      transition: color 0.3s ease;
    }

    nav a:hover {
      color: #f0f0f0;
    }

    .container {
      max-width: 800px;
      margin: 20px auto;
      background-color: #fff;
      padding: 20px;
      box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    }

    .article {
      margin-bottom: 30px;
      padding: 15px;
      border-bottom: 1px solid #e2e2e2;
    }

    .article h2 {
      margin: 0;
      font-size: 1.5em;
      border-bottom: 2px solid #007BFF;
      padding-bottom: 5px;
    }

    .article p {
      color: #666;
    }

    button {
      background: linear-gradient(to bottom, #0099ff, #007BFF);
      color: white;
      padding: 10px 20px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      transition: background-color 0.3s ease, box-shadow 0.3s ease;
    }

    button:hover {
      background: linear-gradient(to bottom, #00b3ff, #0099ff);
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }

    .delete-button {
      background: linear-gradient(to bottom, #FF3333, #FF0000);
      color: white;
      padding: 5px 10px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      marginLeft: 10px;
      transition: background-color 0.3s ease, box-shadow 0.3s ease;
    }

    .delete-button:hover {
      background: linear-gradient(to bottom, #FF6666, #FF3333);
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }

    .edit-button {
      background: linear-gradient(to bottom, #33CC66, #28A745);
      color: white;
      padding: 5px 10px;
      border: nil;
      border-radius: 4px;
      cursor: pointer;
      marginLeft: 10px;
      transition: background-color 0.3s ease, box-shadow 0.3s ease;
    }

    .edit-button:hover {
      background: linear-gradient(to bottom, #55DD88, #33CC66);
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }

    input,
    textarea {
      width: 100%;
      padding: 10px 15px;
      border: 1px solid #ccc;
      border-radius: 20px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
      outline: none;
      transition: border-color 0.3s ease;
    }

    input:focus,
    textarea:focus {
      border-color: #007BFF;
    }

    .footer {
      text-align: center;
      marginTop: 20px;
      padding: 10px 0;
      background: linear-gradient(to bottom, #0099ff, #007BFF);
      color: white;
    }

    /* 新增的样式用于显示上传附件的提示信息 */
    .attachment-upload-status {
      margin-top: 10px;
      color: green;
      display: none;
    }

    /* 新增的样式用于显示上传附件失败的错误信息 */
    .attachment-upload-error {
      margin-top: 10px;
      color: red;
      display: none;
    }
  </style>
</head>

<body>
<header>
  <h1>个人中心</h1>
  <nav>
    <div class="nav-links">
      <a href="/index"><i class="fas fa-home"></i> 主页</a>
      <a href="/personalhomepage">个人主页</a>
      <a href="/search.html">搜索文章</a>
    </div>
  </nav>
</header>

<div class="container">
  <div class="profile">
    <h1 th:text="${session.user.username}"></h1>
    <p>用户 ID: <span th:text="${session.user.getUserid()}"></span></p>
    <p>性别: <span th:text="${session.user.usersex}"></span></p>
    <p>邮箱: <span th:text="${session.user.email}"></span></p>
    <p>电话: <span th:text="${session.user.phone}"></span></p>
    <a class="edit-button" th:href="@{/personalhomepage/xianshiuser}">
      <i class="fas fa-user-edit"></i> 修改用户
    </a>
  </div>

  <div class="article" th:each="article : ${articles}">
    <h2>
      <a th:href="@{/article/{id}(id=${article.article_id})}" th:text="${article.article_title}"></a>
    </h2>
    <p><strong>作者:</strong> <span th:text="${article.articler}"></span></p>
    <p><strong>发布时间:</strong> <span th:text="${article.article_time}"></span></p>
    <p th:text="${article.article_text}" th:truncate="100"></p>
    <a class="edit-button" th:href="@{/personalhomepage/revise/{articleId}(articleId=${article.article_id})}">
      <i class="fas fa-edit"></i> 修改文章
    </a>
    <a class="delete-button" href="#" th:href="@{/personalhomepage/delete/{articleId}(articleId=${article.article_id})}">
      <i class="fas fa-trash"></i> 删除文章
    </a>
  </div>

  <div th:if="${articles == '暂无文章数据'}">
    <p>暂无文章数据</p>
  </div>

  <form th:action="@{/personalhomepage/publish}" method="post" enctype="multipart/form-data">
    <label for="articleTitle">文章标题：</label>
    <input type="text" id="articleTitle" name="articleTitle" required>
    <label for="articleText">文章内容：</label>
    <textarea id="articleText" name="articleText" rows="5" required></textarea>
    <input type="file" id="articleAttachment" name="articleAttachment" style="display:none;">
    <button type="button" id="chooseAttachmentButton">添加附件</button>

    <!-- 新增的用于显示上传附件提示信息的元素 -->
    <p class="attachment-upload-status" th:text="${message}"></p>
    <p class="attachment-upload-error" th:text="${error}"></p>

    <button type="submit" id="publishButton">发布文章</button>
  </form>
</div>

<footer class="footer">
  <p>&copy; 2024 个人博客</p>
</footer>

<script>
  $(document).ready(function () {
    $('#chooseAttachmentButton').click(function () {
      $('#articleAttachment').click();
    });

    // 处理多个删除文章按钮的点击事件
    $('.delete-button').click(function (e) {
      e.preventDefault(); // 阻止链接默认跳转行为

      // 弹出询问确定窗口
      if (confirm("你确定要删除这篇文章吗？")) {
        // 如果用户点击确定，继续执行删除操作
        window.location.href = $(this).attr('href');
      }
    });

    // 处理发布文章按钮的点击事件
    $('#publishButton').click(function (e) {
      e.preventDefault(); // 阻止表单默认提交行为

      // 弹出询问确定窗口
      if (confirm("你确定要发布这篇文章吗？")) {
        // 获取文章标题和内容的值
        var articleTitle = $('#articleTitle').val();
        var articleText = $('#articleText').val();

        // 检查标题和内容是否为空
        if (articleTitle === "" || articleText === "") {
          alert("文章标题和内容不能为空，请填写完整后再发布！");
          return;
        }

        // 如果标题和内容都不为空，继续执行发布操作
        $(this).closest('form').submit();
      }
    });

    // 监听表单提交事件，以便在上传附件后根据后端返回的信息显示相应提示
    $('form').submit(function (e) {
      e.preventDefault(); // 先阻止表单默认提交行为

      var formData = new FormData(this);

      $.ajax({
        url: $(this).attr('action'),
        type: $(this).attr('method'),
        data: formData,
        processData: false,
        contentType: false,
        success: function (response) {
          // 根据后端返回的信息显示相应提示
          if (response.message) {
            $('.attachment-upload-status').text(response.message).show();
            $('.attachment-upload-error').hide();
          } else if (response.error) {
            $('.attachment-upload-error').text(response.error).show();
            $('.attachment-upload-status').hide();
          }

          // 模拟表单提交成功后的跳转（这里只是简单的刷新页面，实际应用中可根据需求调整）
          window.location.reload();
        },
        error: function () {
          $('.attachment-upload-error').text('上传附件或发布文章时出现错误，请重试。').show();
          $('.attachment-upload-status').hide();
        }
      });
    });
  });
</script>
</body>
</html>